<template>
    <div style="margin-left: 10%; margin-right: 10%">
        <Layout>
            <Content>
                <br/>
                <List item-layout="vertical">
                    <!--            :key="item.title"-->
                    <ListItem v-for="item in arts.list" :key="item.id">
                        <ListItemMeta/>
                        <!--                        ababababshdbjkasgduhas-->
                        <Row>
                            <Col :span="16">
                                <div style="margin-left: 5%">
                                    <div>
                                        <router-link :to="'/article?id='+item.id" style="color: black">
                                            <strong style="font-size: x-large">{{item.title}}</strong>
                                        </router-link>
                                        <br/>
                                        <span style="color: gray">{{item.des}}</span>
                                    </div>
                                    <a :href="'/article?id='+item.id" style="text-decoration: none;" v-if="isMo">
                                        <img :src="item.img"
                                             style="width: 280px;">
                                    </a>
                                    <div style="font-size: small; color: gray">
                                        作者：{{item.author}}
                                        <Divider type="vertical" />
                                        阅读量：
                                        {{item.view}}
                                        <Divider type="vertical" />
                                        <Icon type="md-star-outline"/>
                                        {{item.like}}
                                        <br/>
                                        <Icon type="md-time" />
                                        {{item.time}}
                                        <br/>
                                        <Tag color="blue">{{item.tag}}</Tag>
                                    </div>
                                </div>
                            </Col>
                            <Col :span="8" v-if="!isMo">
                                <router-link :to="'/article?id='+item.id">
                                    <img :src="item.img"
                                         style="width: 280px;">
                                </router-link>
                            </Col>
                        </Row>
                    </ListItem>
                </List>
                <br/>
                <Page :total="arts.total" @on-change="changePage" :page-size="6" style="margin-left: 3%"/>
            </Content>
            <Sider style="margin-left: 1%; background-color: rgb(245,247,249);" width="280" v-if="!isMo">
                <br/>
                <br/>
                <Card dis-hover>
                    <p slot="title">置顶</p>
                    <div v-for="i in tops" :key="i.id">
                        <h3>
                            <router-link :to="'/article?id='+i.id" style="color: black">{{i.title}}</router-link>
                        </h3>
                        <span>{{i.des}}</span>
                        <Divider/>
                    </div>
                </Card>
                <br/>
                <Card dis-hover>
                    <p slot="title">点赞排行</p>
                    <div v-for="i in likes" :key="i.id">
                        <h3>
                            <router-link :to="'/article?id='+i.id" style="color: black">{{i.title}}</router-link>
                        </h3>
                        <span>{{i.des}}</span>
                        <Divider/>
                    </div>
                </Card>
            </Sider>
        </Layout>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                isMo: navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i),
                arts: '',
                likes: '',
                tops: '',
            }
        },
        created() {
            this.getData()
        },
        methods: {
            getData() {
                const that = this;
                axios.get('/getArticleForIndex?size=6').then(function (resp) {
                    that.arts = resp.data;
                });
                axios.get('/byLike/5').then(function (resp) {
                    that.likes = resp.data;
                })
                axios.get('/getTop').then(function (resp) {
                    that.tops = resp.data;
                })
            },
            changePage(p) {
                const that = this;
                axios.get('/getArticleForIndex?size=6&now='+p).then(function (resp) {
                    that.arts = resp.data;
                })
                scrollTo(0,0);
            }
        }
    }
</script>

<style scoped>

</style>